<template name="zTextCreate">
	<view class="center-view">
		<view class="option-item"><text class="item-name">问题</text><input class="item-content theme-input" style="border:1upx solid black;width:70%;" v-model="que"/></view>
		<view class="option-item"><text class="item-name">输入长度</text><input class="item-content theme-input" style="border:1upx solid black;width:150upx;text-align:right" type="number" v-model="textLength"/></view>
		<view class="option-item">
			<text class="item-name">输入限制</text>
			<picker class="item-content" @change="changeRestrict" :value="restrictIndex" :range="textRestricts">
				<view style="font-size:40upx;">{{textRestricts[restrictIndex]}}</view>
			</picker>
		</view>
		<view class="option-item">
			<text class="item-name">是否可空</text><switch class="item-content" :checked="empty" @change="changeEmpty" color="green" style="margin-top:-10upx;" />
		</view>
	</view>
</template>
<script>
	export default {
		name : "ztext",
		data() {
			return {
				// input_height : ""
				// question : "问题"
				// 文本长度
				que : "",
				textLength : "",
				// 文本输入限制 
				textRestricts : ["无限制","仅数字","邮箱","电话","身份证号"],
				restrictIndex : 0,
				empty : false
			};
		},
		props : {
		},
		created : function(e){
			
		},
		methods: {
			get : function(id){
				if(this.que == ''){
					uni.showModal({
						title : '错误',
						content : '问题不可为空',
						showCancel : false
					})
					return null;
				}
				var res = {}
				res['question'] = this.que;
				res['key'] = 'q' + id;
				res['type'] = 'ztext';
				var answer = {};
				answer['restrict'] = this.restrictIndex;
				answer['length'] = this.textLength != '' ? parseInt(this.textLength) : 20;
				answer['empty'] = this.empty;
				res['answer'] = answer;
				this.que = '';
				this.textLength = '';
				this.restrictIndex = 0;
				return res;
			},
			changeRestrict : function(e){
				this.restrictIndex = e.target.value;
			},
			changeEmpty : function(e){
				this.empty = e.detail.value;
				// console.log(e)
			}
		}
	}
</script>

<style>
	@import "../../../common/zcss.css";
	/* view{
		flex-direction: column;
	} */
	.question{
		display: inline;
		font-size: 15upx;
	}
	#answer-view{
		flex-direction: row;
	}
	.tip{
		padding-top: 5upx;
		margin-left: 5upx;
		color: red;
		font-size: 10upx;
	}
	#count-text{
		color: gray;
		font-size: 15upx;
	}
	.option-item{
		border-bottom: 1upx solid gray;
		border-top: 1upx solid gray;
		width: 100%;
		height:70upx;
		padding-top: 10upx;
		position: relative;
	}
	.item-name{
		position: absolute;
		left: 1%;
		color: gray;
		top:10upx;
		font-size:40upx;
	}
	.item-content{
		position: absolute;
		right: 1%;
		top:10upx;
		font-size:40upx;
	}
</style>
